@extends('layouts.admin')

@section('content')
    <script type="application/javascript" src="{{url()}}/js/queue.js"></script>

    <div class="modal-msg"></div>
    <p class="text-info">Peak Messages will display the specified number of messages from the Queue. Note: It does not
    change or dequeue the messages.</p>
    <div class="margin-bottom-20">
        <button type="button" class="btn btn-primary btn-md"
                data-toggle="modal" data-target="#addMessage"><i class="fa fa-plus-circle"></i> Add Message
        </button>
        <button type="button" class="btn btn-primary btn-md"
                data-toggle="modal" data-target="#dequeueMessage"><i class="fa fa-plus-circle"></i> Dequeue Message
        </button>
    </div>
    <form class="form-inline get-messages-form margin-bottom-10" action="#" method="post">
        <input name="_token" value="{{csrf_token()}}" hidden>
        <div class="form-group">
            <input class="form-control queue-name" name="queue" placeholder="Queue">
        </div>
        <div class="form-group">
            <input class="form-control messages-num" name="messages-num" placeholder="Number of Messages">
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-md btn-primary query" value="Peak Messages">
        </div>
        <div class="form-group loading">
            <img src="img/loading_spinner.gif">
        </div>
    </form>

    <div class="results"></div>
    @include('modals.addmessage')
    @include('modals.dequeue')
@endsection